import React, { Component } from 'react';
import './style/borderBox.css';
import $ from  'jquery';


class BorderBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      code: '',
      isMove: false,
      oldY: 0,
      oldX: 0,
      NewX: 0,
      NewY: 0
    };
  }

  onResize = (e) => {
    console.log(e);
  }

  onMouseDown = (e) => {
    const { boxPlace, borderAttr, activitySvgId } = this.props;
    $('.borderBox').eq(0).css({
      top: ($(activitySvgId).attr('y') - 1) + 'px',
      left: ($(activitySvgId).attr('x') - 1) + 'px'
    });
    // 鼠标距离borderBox 上和左的距离
    let boxTop = e.clientY - boxPlace.top - borderAttr.top;
    let boxLeft = e.clientX - boxPlace.left - borderAttr.left;
    this.setState({
      isMove: true,
      oldX: boxLeft,
      oldY: boxTop
    });
  }

  onMouseMove = (e) => {
    const { isMove, oldX, oldY } = this.state;
    const { boxPlace, borderAttr } = this.props;
    if (!isMove) return;
    let top = e.clientY - boxPlace.top - oldY;
    let left = e.clientX - boxPlace.left - oldX;
    if (top < 0) {
      top = 0;
    } else if (top > boxPlace.height - borderAttr.height) {
      top = boxPlace.height - borderAttr.height
    }

    if (left < 0) {
      left = 0;
    } else if (left > boxPlace.width - borderAttr.width) {
      left = boxPlace.width - borderAttr.width
    }

    this.setState({
      newX: left,
      newY: top
    });

    $('.borderBox').eq(0).css({
      top: top + 'px',
      left: left + 'px'
    }); 
  }

  pointMouseDown = (data) => {
    const { onMouseMove, changePoint, changeDirection } = this.props;
    onMouseMove();
    changePoint(1);
    changeDirection(data);
  }

  pointMouseUp = () => {
    const { changePoint } = this.props;
    changePoint(2);
  }

  
  onMouseUp = (e) => {
    const { newX, newY } = this.state;
    const { sendMoveSvg } = this.props;
    const obj = {};
    obj.NewX = newX;
    obj.NewY = newY;
    sendMoveSvg(obj);
    this.setState({
      isMove: false,
      oldX: 0,
      oldY: 0
    });
  }

  render() {
    const { borderAttr, isShow } = this.props;
    const { height, width, left, top } = borderAttr;
    const dotTop = (width - 14) / 2;
    const dotLeft = (height - 14) / 2;
    return (
      <div className="borderBox" 
        onClick={(e) => {
          e.stopPropagation();
        }}
        onMouseDown={this.onMouseDown}
        onMouseMove={(e) => this.onMouseMove(e)}
        onMouseUp={this.onMouseUp}
        style={{ height: height + 'px',
                left : left + 'px',
                top: top + 'px',
                width: width + 'px',
                display: isShow ? 'block' : 'none'
       }}>
        <span
          onMouseDown={() => this.pointMouseDown(1)}
          onMouseUp={this.pointMouseUp}
          className="borderBox-dot"
          style={{ top: '-7px', left: '-7px', cursor: 'nw-resize' }}
        />
        <span
          onMouseDown={() => this.pointMouseDown(2)}
          onMouseUp={this.pointMouseUp}
          className="borderBox-dot"
          style={{ top: '-7px', right: '-7px', cursor: 'ne-resize' }}
        />
        <span className="borderBox-dot" style={{ bottom: '-7px', left: '-7px', cursor: 'sw-resize' }}></span>
        <span className="borderBox-dot" style={{ bottom: '-7px', right: '-7px', cursor: 'se-resize' }}></span>

        <span className="borderBox-dot" style={{ top: '-7px', left: `${dotTop}px`, cursor: 'n-resize' }}></span>
        <span className="borderBox-dot" onMouseDown={(e) => this.onResize(e)} style={{ bottom: '-7px', left: `${dotTop}px`, cursor: 's-resize' }}></span>
        <span className="borderBox-dot" style={{ top: `${dotLeft}px`, left: `-7px`, cursor: 'e-resize' }}></span>
        <span className="borderBox-dot" style={{ bottom: `${dotLeft}px`, right: `-7px`, cursor: 'w-resize' }}></span>
      </div>
    );
  }
}


export default BorderBox;

